<template>
    <div id="container" ref="container"></div>
</template>
<script>
export default {
        return{
            theme:'vs-dark',
            codesCopy:'',//内容备份
            language: 'typescript',
            codes:'console.log("hello,iPanel");',
            monacoEditor: null,
            editorOptions:{
                selectOnLineNumbers: true,
                roundedSelection: false,
                readOnly: false,        // 只读
                cursorStyle: 'line',        //光标样式
                automaticLayout: false, //自动布局
                glyphMargin: true,  //字形边缘
                useTabStops: false,
                fontSize: 40,       //字体大小
                autoIndent:true,//自动布局
                //quickSuggestionsDelay: 500,   //代码提示延时
            }
        }
    },
    mounted(){
        this.initEditor(true);
    },
    methods:{
        initEditor(useCodeFlag){
            let self = this;
            if(self.monacoEditor != null) {
                self.monacoEditor = null;
                self.$refs.container.innerHTML = '';
            }
            //console.log('initEditor--',self.codes);
            if(useCodeFlag){
                self.codesCopy = self.codes;
            }
            self.monacoEditor = monaco.editor.create(self.$refs.container, {
                value:self.codesCopy,
                language: self.language,
                theme: self.theme,//vs, hc-black, or vs-dark
                fontSize:18,
                editorOptions:self.editorOptions,
            });

            self.$emit('onMounted',self.monacoEditor);//编辑器创建完成回调
            self.monacoEditor.onDidChangeModelContent(function(event){//编辑器内容changge事件
                self.codesCopy = self.monacoEditor.getValue();
                self.$emit('onCodeChange',self.monacoEditor.getValue(),event);
            });
            //编辑器随窗口自适应
            window.addEventListener('resize',function(){
                self.updateEdit();
            })
        },
        updateEdit(useCodeFlag) {
            var self = this;
            if(useCodeFlag){
                self.codesCopy = self.codes;
            }
            this.monacoEditor.updateOptions({
                theme: self.theme//vs, hc-black, or vs-dark
            });
            this.monacoEditor.setValue(self.codesCopy);
            monaco.editor.setModelLanguage(self.monacoEditor.getModel(), self.language);
        },
        RunResult(){
           //console.log(this.monacoEditor.getValue());
        }
    }
}
</script>
<style scoped>
    #container{
        width:100%;
        height: 100%;
        min-height: 605px;
        overflow: auto;
        text-align: left;
    }
    ::-webkit-scrollbar{
        width:3px;
        height:3px;
    }
</style>